<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<%-- <script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.42.min.js"></script> --%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/base.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/reg.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/headbott.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/ace.min.css" />
	
<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/js/validation/validator.js"></script>
 --%>
<script type="text/javascript">
// 获取验证码
function validateCode(){
	//alert("======================================");
	$.ajax({
		url : "${pageContext.request.contextPath}/front/user/registerCode.action",
		method : "post",
		dataType : "json", // xml text json
		async : true,
		success : function(data) {
			//alert("请输入验证码：" + data.validateCode);
			$("#codeBtn").html(data.validateCode);
		},
		error : function() {
			alert("对不起，验证码获取出错啦！");
		}
	});
}

function checkCode(code) {
		if(code == "") {
			alert("验证码不能为空！");
		}else {
			$.ajax({
				cache: false,
				url: "${pageContext.request.contextPath}/front/user/checkRegisterCode.action",
				method : "post",
				dataType : "json", // xml text json
				data : { "code" :  code},
				//async : true,
				success : function(data) {
					console.log("验证结果：" + data.msg + "====" + data.isSame);
					//$("#codeBtn").text(data.msg);
					if( !data.isSame ) { // 验证不通过
						alert("输入的验证码有误，请重新输入新的验证码！");
						//$("#codeBtn").html("<a href=\"#\">"+data.validateCode+"</a>");
						validateCode();
					}else {
						$("#codeBtn").empty();
						$("#codeBtn").append("<a href=\"#\">"+data.validateCode+"</a>");
					}
				},
				error : function() {
					alert("对不起，验证码输入不正确！");
				}
			});
		}
}
// 注册提交
function btnRegister(){
	console.log($("#registerForm").serialize()); //.serialize()
	$.ajax({
		url: "${pageContext.request.contextPath}/front/user/manuRegister.action",
		method: "post",
		dataType: "json",
		data: $("#registerForm").serialize(),
		success: function(data) {
			alert("..." + data.msg);
			
			//window.location.href="http://www.baidu.com";
		},
		error: function() {
			alert("注册失败");
		}
	});
}

</script>
</head>

<body>
	<%@include file="/WEB-INF/pages/front/common/cf_head.jsp"%>

	<div class="login-container">

		<div class="space-6"></div>

		<div class="position-relative">
			<div id="signup-box" class="signup-box widget-box no-border">
				<div class="widget-body">
					<div class="widget-main">
						<h4 class="header green lighter bigger">
							<i class="ace-icon fa fa-users blue"></i> 用户注册
						</h4>

						<div class="space-6"></div>
						<p>填写信息:</p>

						<form id="registerForm">
							<fieldset>
								<label class="block clearfix"> <span
									class="block input-icon input-icon-left"> 
									<input id="email" name="email"
										type="text" class="form-control" placeholder="邮箱或手机号码" /> 
										<i class="ace-icon fa fa-envelope"></i>
								</span>
								</label> <label class="block clearfix"> <span
									class="block input-icon input-icon-left"> 
									<input id="name" name="name" 
										type="text" class="form-control" placeholder="用户名" /> <i
										class="ace-icon fa fa-user"></i>
								</span>
								</label> <label class="block clearfix"> <span
									class="block input-icon input-icon-left"> 
									<input id="password" name="password"
										type="password" class="form-control" placeholder="密码" /> <i
										class="ace-icon fa fa-lock"></i>
								</span>
								</label> <label class="block clearfix"> <span
									class="block input-icon input-icon-left"> 
									<input id="confirmpass" name="confrimpass"
										type="password" class="form-control" placeholder="确认密码" /> <i
										class="ace-icon fa fa-retweet"></i>
								</span>
								</label>
								<!--验证码-->
								<label class="block clearfix"> <span> 
									<input id="code" name="code" onblur="checkCode(this.value)"
										type="text" class="" placeholder="验证码" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										
											<button id="codeBtn" onclick="validateCode()" class="btn btn-default">
											<a href="#">点击获取验证码</a>
											</button>
										
								</span>
								</label> <label class="block"> 
								<input type="checkbox" 
									class="ace" /> <span class="lbl"> 接受 <a href="#">用户协议</a>
								</span>
								</label>

								<div class="space-24"></div>

								<div class="clearfix">
									<button type="reset" class="width-30 pull-left btn btn-sm">
										<i class="ace-icon fa fa-refresh"></i> <span
											class="bigger-110">重置</span>
									</button>

									<button type="button" onclick="btnRegister()"
										class="width-65 pull-right btn btn-sm btn-success">
										<span class="bigger-110">注册</span> <i
											class="ace-icon fa fa-arrow-right icon-on-right"></i>
									</button>
								</div>
							</fieldset>
						</form>
						<!--第三方-->
						<div class="social-or-login center">
							<span class="bigger-110">第三方登录</span>
						</div>

						<div class="space-6"></div>

						<div class="social-login center">
							<a href="#"> <img
								src="${pageContext.request.contextPath}/images/weixin.png">
							</a> <a href="#"> <img
								src="${pageContext.request.contextPath}/images/qq.png">
							</a> <a href="#"> <img
								src="${pageContext.request.contextPath}/images/sina.png">
							</a>
						</div>
					</div>

					<div class="toolbar center">
						<a
							href="${pageContext.request.contextPath}/front/user/login_jsp.action?head_status=${head_status}&logreg_flag=login"
							data-target="#login-box" class="back-to-login-link"> <i
							class="ace-icon fa fa-arrow-left"></i> 返回登录
						</a>
					</div>
				</div>
				<!-- /.widget-body -->
			</div>
		</div>
	</div>
	<!-- </div> -->
	<%@include file="/WEB-INF/pages/front/common/cf_bottom_2.jsp"%>
</body>
</html>
